<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>关于我们 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4263EB;
            --primary-light: #E8F0FE;
            --secondary: #36B37E;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --text-dark: #333;
            --border-radius: 12px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--text-dark);
            padding-top: 56px;
            line-height: 1.6;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
        }
        
        .nav-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        /* 主容器 */
        .about-container {
            background-color: white;
            padding: 20px 16px;
        }
        
        /* 品牌区域 */
        .brand-section {
            text-align: center;
            padding: 10px 0 30px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .brand-logo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: var(--primary);
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
        }
        
        .brand-name {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .brand-slogan {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 16px;
        }
        
        .version-info {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 内容区块 */
        .content-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-content {
            font-size: 14px;
            color: #555;
            margin-bottom: 16px;
        }
        
        .section-content p {
            margin-bottom: 12px;
        }
        
        /* 特性列表 */
        .features-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .feature-item {
            background-color: var(--primary-light);
            padding: 16px;
            border-radius: var(--border-radius);
            text-align: center;
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            margin: 0 auto 10px;
        }
        
        .feature-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .feature-desc {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 团队展示 */
        .team-list {
            display: flex;
            overflow-x: auto;
            gap: 16px;
            padding-bottom: 8px;
            margin-bottom: 16px;
        }
        
        .team-member {
            flex-shrink: 0;
            width: 100px;
            text-align: center;
        }
        
        .member-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 8px;
            border: 2px solid var(--primary-light);
        }
        
        .member-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .member-role {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 联系信息 */
        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background-color: var(--light-gray);
            border-radius: var(--border-radius);
        }
        
        .contact-icon {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .contact-info {
            flex: 1;
        }
        
        .contact-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .contact-value {
            font-size: 13px;
            color: var(--gray);
        }
        
        /* 链接列表 */
        .links-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        
        .link-item {
            background-color: var(--light-gray);
            padding: 16px 8px;
            border-radius: var(--border-radius);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-dark);
        }
        
        .link-icon {
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .link-text {
            font-size: 13px;
        }
        
        /* 底部版权 */
        .copyright {
            text-align: center;
            font-size: 12px;
            color: var(--gray);
            padding: 20px 0 10px;
            border-top: 1px solid #eee;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="back-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">关于我们</h1>
    </div>
    
    <!-- 主容器 -->
    <div class="about-container">
        <!-- 品牌区域 -->
        <div class="brand-section">
            <div class="brand-logo">
                <i class="fas fa-connectdevelop"></i>
            </div>
            <h2 class="brand-name">Connect社交</h2>
            <p class="brand-slogan">连接世界，分享生活的每一刻</p>
            <p class="version-info">版本号 v3.5.2</p>
        </div>
        
        <!-- 平台介绍 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-info-circle"></i> 平台介绍
            </h3>
            <div class="section-content">
                <p>Connect社交是一款专注于真实社交体验的社交平台，创立于2020年，致力于为用户提供安全、友好、高效的社交服务。</p>
                <p>我们相信社交的本质是连接与分享，通过不断优化产品体验，让人们能够更便捷地认识新朋友、维护人际关系，并发现更广阔的世界。</p>
            </div>
        </div>
        
        <!-- 核心特性 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-star"></i> 核心特性
            </h3>
            <div class="features-list">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="feature-title">真实社交</div>
                    <div class="feature-desc">实名认证，拒绝虚假账号</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="feature-title">安全保障</div>
                    <div class="feature-desc">多重隐私保护机制</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-comment-dots"></i>
                    </div>
                    <div class="feature-title">多元互动</div>
                    <div class="feature-desc">丰富的社交互动方式</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-globe-asia"></i>
                    </div>
                    <div class="feature-title">兴趣社区</div>
                    <div class="feature-desc">找到志同道合的朋友</div>
                </div>
            </div>
        </div>
        
        <!-- 团队介绍 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-user-friends"></i> 我们的团队
            </h3>
            <div class="team-list">
                <div class="team-member">
                    <img src="https://picsum.photos/id/64/100/100" alt="团队成员" class="member-avatar">
                    <div class="member-name">张明</div>
                    <div class="member-role">创始人</div>
                </div>
                <div class="team-member">
                    <img src="https://picsum.photos/id/65/100/100" alt="团队成员" class="member-avatar">
                    <div class="member-name">李华</div>
                    <div class="member-role">产品总监</div>
                </div>
                <div class="team-member">
                    <img src="https://picsum.photos/id/66/100/100" alt="团队成员" class="member-avatar">
                    <div class="member-name">王芳</div>
                    <div class="member-role">设计负责人</div>
                </div>
                <div class="team-member">
                    <img src="https://picsum.photos/id/67/100/100" alt="团队成员" class="member-avatar">
                    <div class="member-name">赵强</div>
                    <div class="member-role">技术总监</div>
                </div>
                <div class="team-member">
                    <img src="https://picsum.photos/id/68/100/100" alt="团队成员" class="member-avatar">
                    <div class="member-name">陈静</div>
                    <div class="member-role">运营主管</div>
                </div>
            </div>
        </div>
        
        <!-- 发展历程 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-history"></i> 发展历程
            </h3>
            <div class="section-content">
                <p><strong>2020年3月</strong> - Connect社交正式成立，团队组建完成</p>
                <p><strong>2020年9月</strong> - 产品1.0版本上线，注册用户突破10万</p>
                <p><strong>2021年5月</strong> - 完成A轮融资，用户数突破100万</p>
                <p><strong>2022年3月</strong> - 推出兴趣社区功能，日活跃用户达50万</p>
                <p><strong>2023年1月</strong> - 3.0版本重大更新，引入AI智能推荐系统</p>
            </div>
        </div>
        
        <!-- 联系我们 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-envelope"></i> 联系我们
            </h3>
            <div class="contact-list">
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="contact-info">
                        <div class="contact-title">客服邮箱</div>
                        <div class="contact-value">support@connect.com</div>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="contact-info">
                        <div class="contact-title">客服电话</div>
                        <div class="contact-value">400-888-9999（工作日 9:00-18:00）</div>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="contact-info">
                        <div class="contact-title">公司地址</div>
                        <div class="contact-value">北京市海淀区科技园区88号创新大厦15层</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 相关链接 -->
        <div class="content-section">
            <h3 class="section-title">
                <i class="fas fa-link"></i> 相关链接
            </h3>
            <div class="links-list">
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="link-text">用户协议</div>
                </a>
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-user-secret"></i>
                    </div>
                    <div class="link-text">隐私政策</div>
                </a>
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="link-text">帮助中心</div>
                </a>
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <div class="link-text">公告动态</div>
                </a>
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-hand-holding-heart"></i>
                    </div>
                    <div class="link-text">反馈建议</div>
                </a>
                <a href="#" class="link-item">
                    <div class="link-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="link-text">企业合作</div>
                </a>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="copyright">
            © 2023 Connect社交平台 版权所有<br>
            京ICP备12345678号-1
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            history.back();
        });
        
        // 相关链接点击事件
        const linkItems = document.querySelectorAll('.link-item');
        linkItems.forEach(item => {
            item.addEventListener('click', function(e) {
                const text = this.querySelector('.link-text').textContent;
                // 在实际应用中，这里会跳转到相应页面
                alert(`即将跳转到：${text}`);
                e.preventDefault();
            });
        });
        
        // 联系信息点击事件
        const contactItems = document.querySelectorAll('.contact-item');
        contactItems.forEach(item => {
            item.addEventListener('click', function() {
                const value = this.querySelector('.contact-value').textContent;
                const title = this.querySelector('.contact-title').textContent;
                
                if (title.includes('电话')) {
                    // 模拟拨打电话
                    alert(`拨打：${value}`);
                } else if (title.includes('邮箱')) {
                    // 模拟发送邮件
                    alert(`发送邮件到：${value}`);
                } else if (title.includes('地址')) {
                    // 模拟打开地图
                    alert(`在地图中查看：${value}`);
                }
            });
        });
    </script>
</body>
</html>
